<div class="lib-manager-box">
    <div class="left-box animate__animated animate__fadeInLeft animate__faster">
        <div class="table-header">
            <div>已安装<span>（可拖拽排序）</span></div>
            <div class="version">版本号</div>
            <div class="show">可用</div>
        </div>
        <!-- 已安装的库 -->
        <div class="scroll-box" [perfectScrollbar]="{}">
            <div class="lib-list" #libListBox *ngIf="libManagerLoaded">
                <ng-container *ngFor="let libName of libList;trackBy:trackBylibName">
                    <ng-container *ngIf="libDict[libName]">
                        <div class="item" *ngIf="libDict[libName].json" data-id="{{libName}}">
                            <div class="kk" [ngStyle]="{background: libDict[libName].json.colour}"></div>
                            <div class="icon"><i class="{{libDict[libName].json.icon}}"></i></div>
                            <div class="name">{{libDict[libName].json.category}}</div>
                            <div class="version">{{libDict[libName].json.version}}</div>
                            <div class="show"><label nz-checkbox [(ngModel)]="libDict[libName].show"
                                    (ngModelChange)="libShowChange($event,libName)"></label></div>
                        </div>
                    </ng-container>
                </ng-container>
            </div>
        </div>
        <!-- 正在安装的库 -->
        <div class="lib-list">
            <ng-container *ngFor="let lib_install of libList_install">
                <div class="item install">
                    <div class="kk"></div>
                    <div class="icon"><i class="{{lib_install.icon}}"></i></div>
                    <div class="name">{{lib_install.category}}</div>
                    <div class="version">{{lib_install.version}}</div>
                    <div class="show">
                        <i nz-icon nzType="loading" nzTheme="outline"></i>
                    </div>
                </div>
            </ng-container>
        </div>
    </div>
    <div class="right-box animate__animated animate__fadeInRight animate__faster">
        <div class="search-box">
            <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
                <input type="text" nz-input placeholder="搜索" />
            </nz-input-group>
            <ng-template #suffixIconButton>
                <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
            </ng-template>
            <div class="tag-box">
                热门标签：
                <nz-tag *ngFor="let tag of libList_cloud_tags" [nzColor]="tag.color">{{tag.name}}</nz-tag>
            </div>
        </div>
        <div class="cloud-lib-list">
            <div class="cloud-lib-item" *ngFor="let lib_cloud of libList_cloud">
                <div class="top">
                    <div class="img-box">
                        <img *ngIf="lib_cloud.icon.indexOf('http')>-1;else icon"
                            src="https://www.arduino.cn/template/sxp_jz_001/image/logo.png" alt="">
                        <ng-template #icon>
                            <i class="{{lib_cloud.icon}}"></i>
                        </ng-template>
                    </div>
                    <div style="margin-left: 7px">
                        <div class="name">{{lib_cloud.category}}</div>
                        <div class="author">提供者: {{lib_cloud.author}}</div>
                        <div class="shehui">
                            <!-- <div>
                                <i class="fal fa-arrow-alt-to-bottom"></i>
                                <div>5221</div>
                            </div>
                            <nz-divider nzType="vertical"></nz-divider>
                            <div>
                                <i class="fal fa-thumbs-up"></i>
                                <div>5221</div>
                            </div>
                            <nz-divider nzType="vertical"></nz-divider>
                            <div>
                                <i class="fal fa-comment-alt-dots"></i>
                                <div>5221</div>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <p>{{lib_cloud.introduction}}</p>
                </div>
                <div class="bottom">
                    <div class="website" (click)="openUrl(lib_cloud.url)">了解更多</div>
                    <div>版本</div>
                    <nz-select nzSize="small" [ngModel]="lib_cloud.verisonSelected">
                        <nz-option *ngFor="let version of lib_cloud.version" [nzValue]="version" [nzLabel]="version">
                        </nz-option>
                    </nz-select>
                    <button nz-button nzType="primary" nzSize="small" *ngIf="!lib_cloud['state']"
                        (click)="installLib(lib_cloud)" [nzLoading]="lib_cloud['loading']">安装</button>
                    <button nz-button nzType="primary" nzSize="small" *ngIf="lib_cloud['state']"
                        (click)="uninstallLib(lib_cloud)" [nzLoading]="lib_cloud['loading']">移除</button>
                    <button nz-button nzType="primary" nzSize="small" *ngIf="lib_cloud['newer']"
                        (click)="updateLib(lib_cloud)" [nzLoading]="lib_cloud['loading']">更新</button>
                </div>
            </div>
        </div>
    </div>
</div>